<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue基础</title>
</head>

<body>

    <div id="app">
        {{ message }}
        <h2>
            学校（对象属性）：{{school.name}}
            <br>
            电话（对象属性）：{{school.mobile}}
            <br>
            校区(数组)：
            <ul>
                <li>{{campus[0]}}</li>    
                <li>{{campus[3]}}</li>
            </ul>
            完整对象data：{{school}}
        </h2>
    </div>
 
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="./js/vuev2.7.14.js"></script>
    <script>
        var app = new Vue({
            el: '#app', //这里使用了 css的id选择器（符号#） 来命中dom元素。 推荐使用id选择器
            data: {
                message: '你好 颖辉!',
                school:{
                    name:"黑马程序员",
                    mobile:"400-618-9090"
                },
                campus:["北京校区","上海校区","广州校区","深圳校区"]
            }
        })
    </script>

    <!-- 总结：
        Vue中用到的数据定义在data中
        data中可以写复杂类型的数据
        渲染复杂类型数据时,遵守js的语法即可
            对象： school.name
            数组： campus[0]
    -->

</body>


</html>